<template>
  <div class="base-info-container">
    <el-form
      ref="baseInfoForm"
      :model="info.form"
      :rules="rules"
      label-position="top">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="表单名称" prop="name">
            <el-input @input="inputName" v-model.lazy.trim="info.form.name" placeholder="请输入表单名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="表单标识" prop="code">
            <el-input v-model="info.form.code" readonly placeholder="表单标识"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="表名" prop="tableName">
            <el-input
              :readonly="Boolean(info.form.id)"
              v-model.lazy="info.form.tableName"
              placeholder="请输入表名">
              <template slot="prepend">form_</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="menuId">
            <span slot="label">父级菜单
              <el-tooltip content="菜单生成的上级菜单" placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
            <tree-select
              size=""
              :value="info.form.menuId"
              :list="menus"
              :props="infoProps"
              :clearable="true"
              :accordion="true"
              @getValue="(value) => {info.form.menuId = value}"/>
          </el-form-item>
        </el-col>
<!--        <el-col :span="12">
          <el-form-item
            label="表单分组"
            prop="groupId">
            <tree-select
              size=""
              :value="info.form.groupId"
              :list="formTypes"
              :props="infoProps"
              :clearable="true"
              :accordion="true"
              @getValue="(value) => {info.form.groupId = value}"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="访问路径" prop="path">
            <el-input readonly placeholder="无数据" :value="'h5ve/url/' + info.form.code"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="接口地址" prop="apiPath">
            <el-input readonly :value="'h5ve/api/' + info.form.code"/>
          </el-form-item>
        </el-col>-->
        <el-col :span="24">
          <el-form-item label="备注">
            <el-input :rows="7" v-model="info.form.remarks" type="textarea" placeholder="请输入备注"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import {getLetterByStr} from "@/utils/h5ve";
import {duplicateChecking, getMenuTree} from "@/api/toolkit/form";
import {groupTree} from "@/api/toolkit/groupInfo";
import treeSelect from '@/components/TreeSelect';

export default {
  name: "base-info",
  components: { treeSelect},
  props: {
    info: {
      type: Object,
      default() {
        return {
          form: {
            id: "",
            applicationId: null,
            appType: "",
            name: "",
            code: "",
            tableName: "",
            databaseName: "master",
            remarks: "",
          }
        }
      },
      isEdit: false
    }
  },
  data() {
    const validate = (rule, value, callback) => {
      if (!value) {
        callback(new Error('表单名称必填！'));
      } else {
        if (this.formNameState === 0) {
          callback(new Error('正在校验表单名称！'));
        } else if (this.formNameState === 1) {
          callback(new Error('已存在该表单名称！'));
        } else {
          callback();
        }
      }
    }
    return {
      menus: [],
      formNameState: 2,
      formTypes: [],
      infoProps: {
        value: 'id',
        label: 'name',
        children: 'children'
      },
      rules: {
        name: [
          {required: true, validator: validate, trigger: "blur"}
        ],
        tableName: [
          {required: true, message: "表名必填！", trigger: "blur"}
        ]
      }
    }
  },
  created() {
    this.getMenuTreeData();
  },
  methods: {
    inputName(data) {
      if (data && !this.info.form.id) {
        this.formNameState = 0;
        duplicateChecking(data).then(response => {
          const {code} = response;
          if (code) {
            this.formNameState = 1;
          } else {
            this.formNameState = 2;
          }
        }).catch(() => {
          this.formNameState = 1;
        })
        if (!this.info.form.id) {
          this.info.form.tableName = getLetterByStr(data);
        }
      }else {
        this.formNameState = 2;
      }
    },
    /**获取菜单树*/
    getMenuTreeData() {
      getMenuTree().then(res => {
        this.menus = res.data;
      })
    }
  }
}
</script>

<style scoped lang="scss">
.base-info-container {
  padding: 50px 20%;
  height: calc(100vh - 45px);
}

::v-deep .el-form-item__label {
  padding: 0;
}
</style>
